<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-19 16:37:17
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2024-01-12 16:15:21
 * @FilePath: \test\src\components\BussComponents\ThreeZero.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <BoxTitleBig title="三零建设" subTitle="三零建设工作布防图">
    <template #body>
      <div class="map_content">
        <div class="map" id="map"></div>
        <div class="lenged">
          <div class="lenged_item" v-for="item in lengedList">
            <div class="icon">
              <img :src="item.icon" alt="" />
            </div>
            <div class="text">{{ item.name }}</div>
          </div>
        </div>
      </div>

      <el-dialog
        v-model="centerDialogVisible"
        title=""
        :fullscreen="true"
        align-center
        @open="dialogOpen(1)"
        @opened="dialogOpen(2)"
      >
        <template #footer>
          <div class="video_box"></div>
          <!-- <iframe :src="`${url}`" frameborder="0"></iframe> -->
        </template>
      </el-dialog>
    </template>
  </BoxTitleBig>
</template>

<script setup>
import { useMapbox } from "@/hooks/useMapbox.js";
import { onMounted, reactive,ref} from "vue";

let { initMap } = useMapbox({ domId: "map" });
let map;
console.log(map, "mapmap");
let pointJson = require("../../assets/json/point.json");
let centerDialogVisible = ref(false);
let lengedList = reactive([
  {
    icon: require("../../assets/images/icon/社区办公室.png"),
    name: "社区办公室",
  },
  {
    icon: require("../../assets/images/icon/自行车棚.png"),
    name: "自行车棚",
  },
  {
    icon: require("../../assets/images/icon/高层住宅.png"),
    name: "高层住宅",
  },
  {
    icon: require("../../assets/images/icon/地下车库.png"),
    name: "地下车库",
  },
  {
    icon: require("../../assets/images/icon/消防通道.png"),
    name: "消防通道",
  },
  {
    icon: require("../../assets/images/icon/应急避难所.png"),
    name: "应急避难所",
  },
  {
    icon: require("../../assets/images/icon/地上车库.png"),
    name: "地上车库",
  },
  {
    icon: require("../../assets/images/icon/施工道路.png"),
    name: "施工道路",
  },
  {
    icon: require("../../assets/images/icon/门禁.png"),
    name: "门禁",
  },
  {
    icon: require("../../assets/images/icon/烟雾报警器.png"),
    name: "烟雾报警器",
  },
  {
    icon: require("../../assets/images/icon/监控摄像头.png"),
    name: "监控摄像头",
  },
]);

// 添加数据源
function addSources() {
  map.addSource("point-source", {
    type: "geojson",
    data: pointJson,
  });
}
// 添加图层
function addLayers() {
  map.addLayer({
    id: "point-layer",
    type: "symbol",
    source: "point-source",
    layout: {
      // 表达式
      "icon-image": [
        "match",
        ["get", "icon"],
        "park",
        "parkIcon",
        "door",
        "doorIcon",
        "video",
        "videoIcon",
        "defaultIcon", // 默认图标，如果没有匹配到任何条件
      ],
      "text-field": "{name}",
      // "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
      "text-offset": [0, -1.3],
      "text-anchor": "bottom",
      "text-size": 12,
      "icon-allow-overlap": true,
      "icon-offset": [-10, 0], // 调整图标位置，使得图标显示在圆形背景的上方
      "icon-ignore-placement": true,
      "icon-size": 0.15,
    },
    paint: {
      "text-color": "#fff",
      "text-halo-width": 1,
      "text-halo-blur": 1,
      "text-halo-color": "#000000",
    },
  });
  map.addLayer({
    id: "point-circle-layer",
    type: "circle",
    source: "point-source",
    layout: {},
    paint: {
      "circle-radius": 16, // 圆形背景的半径
      "circle-color": "rgba(255, 0, 0, 0.5)", // 圆形背景的颜色，使用半透明颜色
    },
  });
}

function addImage() {
  map.loadImage(
    require("../../assets/images/icon/地下车库.png"),
    (error, image) => {
      if (error) throw error;
      map.addImage("parkIcon", image);
    }
  );
  map.loadImage(
    require("../../assets/images/icon/门禁.png"),
    (error, image) => {
      if (error) throw error;
      map.addImage("doorIcon", image);
    }
  );
  map.loadImage(
    require("../../assets/images/icon/监控摄像头.png"),
    (error, image) => {
      if (error) throw error;
      map.addImage("videoIcon", image);
    }
  );
}

function mapOn() {
  map.on("load", () => {
    console.log("地图加载");
    addImage();
    addSources();
    addLayers();
    // this.addImage();
    // this.addSource();
    // this.addLayers();
  });
}
function layerListenClick() {
  pointLayerListenClick()
}
function pointLayerListenClick() {
  map.on("click", "point-layer", function (e) {
    console.log(e.features, "ooooo");
    centerDialogVisible.value = true
  });
}

function dialogOpen(a){
  console.log(a);
}
onMounted(() => {
  map = initMap();
  mapOn();
  layerListenClick();
  console.log(map, "mapmap");
});
</script>

<style lang="scss" scoped>
.map_content {
  width: 100%;
  height: 100%;
  @include display(flex-start, center, column);
  .map {
    width: 866px;
    height: 532px;
    margin-top: 60px;
  }
  .lenged {
    width: 100%;
    height: 32%;
    @include display(flex-start, center, row);
    margin-bottom: 4%;
    flex-wrap: wrap;
    .lenged_item {
      @include display(flex-start, center, row);
      padding-left: 40px;
      box-sizing: border-box;
      width: 33.33%;
      font-size: 28px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      color: #ffffff;
      .icon {
        width: 30px;
        height: 30px;
        margin-right: 6px;
        img {
          width: 100%;
        }
      }
    }
  }
}
.video_box{
  width: 100%;
  height: 100%;
}
::v-deep .el-overlay {
  .el-dialog {
    background: #111724 !important;
    @include display(flex-start, center, column);
    .el-dialog__footer {
      width: 100%;
      height: 0;
      flex-grow: 1 !important;
      display: flex;
      justify-content: center;
    }

    .el-dialog__close {
      color: #fff !important;
      font-weight: bold;
      font-size: 50px;
      right: 30px;
    }
  }
}
</style>
